<template>
<div class='article-container'>
  <el-card class="box-card">
  <!-- 导航 -->
  <div slot="header" class="clearfix">
    <my-breadcrumb>内容管理</my-breadcrumb>
  <!-- <el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>内容管理</el-breadcrumb-item>
</el-breadcrumb> -->
</div>
  <!-- 表单 -->
  <el-form ref="form" :model="form" label-width="80px">
      <!-- <el-form-item label="状态">
      <el-radio-group v-model="form.status">
            <el-radio :label="null">全部</el-radio>
            <el-radio :label="0">草稿</el-radio>
            <el-radio :label="1">待审核</el-radio>
            <el-radio :label="2">审核通过</el-radio>
            <el-radio :label="3">审核失败</el-radio>
            <el-radio :label="4">已删除</el-radio>
      </el-radio-group>
    </el-form-item> -->
    <my-status v-model="form.status"></my-status>
    <!-- 使用 channel.vue组件-->
    <my-channel v-model="form.channelId"></my-channel>
    <el-form-item label="日期">
          <el-col :span="11">
            <el-date-picker type="daterange" start-placeholder="开始日期" end-placeholder="结束日期" v-model="form.dateRange" value-format="yyyy-MM-dd" range-separator="至"></el-date-picker>
          </el-col>
        </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">查询</el-button>
    </el-form-item>
  </el-form>
  </el-card>
  <!-- 表格 -->
  <el-card style="margin-top:35px">
    <div slot="header" class="clearfix">
          根据帅选条件共查询条{{total_count}}结果
    </div>
    <el-table
        :data="tableData"
        border
        style="width: 100%">
        <el-table-column
          label="封面"
          width="180">
            <template slot-scope="scope">
            <el-image :src="scope.row.cover.images[0]" style="width: 100px; height: 100px">
              <div slot="placeholder" class="image-slot">
                加载中<span class="dot">...</span>
              </div>
            </el-image>
          </template>
        </el-table-column>
        <el-table-column
          prop="title"
          label="标题"
          width="180">
        </el-table-column>
        <el-table-column
          label="状态">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status===2">审核通过</el-tag>
          <el-tag type="info" v-else-if="scope.row.status===0">草稿</el-tag>
          <el-tag type="warning" v-else-if="scope.row.status===1">待审核</el-tag>
          <el-tag type="danger" v-else-if="scope.row.status===3">审核失败</el-tag>
          <el-tag type="success" v-else-if="scope.row.status===4">已删除</el-tag>
        </template>
    </el-table-column>
     <el-table-column
          prop="pubdate"
          label="发布时间">
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          type="primary"
          icon="el-icon-edit"
          circle
          size="mini"
          @click="handleEdit(scope.$index, scope.row)"></el-button>
        <el-button
          size="mini"
          type="danger"
          icon="el-icon-delete"
          circle
          @click="handleDelete(scope.$index, scope.row)"></el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
      background
      layout="prev, pager, next"
      :total="total_count"
      style="margin-top:35px"
      @current-change="hPag"
      >
</el-pagination>
  </el-card>
  </div>
</template>

<script>
import MyChannel from '@/components/channel.vue' // 导入channel.vue组件
import MyStatus from '@/components/status.vue' // status.vue组件
export default {
  name: 'ArticleIndex',
  data () {
    return {
      form: {
        dateRange: null, // 日期筛选
        delivery: false,
        type: [],
        resource: '',
        desc: '',
        status: null // 筛选文章的状态
      },
      tableData: [],
      isLoading: false, // 控制“加载中”的数据项
      pag: 1, // 页码默认是第一页
      total_count: 0 // 总页数
    }
  },
  // 注册channel.vue组件
  components: {
    MyChannel,
    MyStatus
  },
  created () {
    this.loadData()
  },
  methods: {
    // 点击查询处理函数
    onSubmit () {
      this.loadData()
    },
    // 发送请求获取数据
    async loadData () {
      const { dateRange, status } = this.form
      const queryobj = {
        page: this.pag, // 点击页码时传递的参数
        status
      }
      if (dateRange) {
        queryobj.begin_pubdate = dateRange[0] // 如果'日期筛选'有选中的话dateRange为数组，则开始日期为dateRange数组的第0索引
        queryobj.end_pubdate = dateRange[1] // 结束日期为dateRange数组的第1索引
      }
      const res = await this.$http({
        method: 'get',
        url: '/mp/v1_0/articles',
        params: queryobj
      })
      // 把数据赋值给tableDats
      this.tableData = res.data.data.results // 表格数据
      this.total_count = res.data.data.total_count // 页数数据
    },
    // 点击页码后的处理函数
    hPag (pag) {
      // 1 更新页码
      this.pag = pag
      // 2 重新发请求
      this.loadData()
    },
    // 点击编辑处理函数
    handleEdit (index, row) {
      // console.log(index, row)
      this.$router.push('/edit/' + row.id.toString())
    },
    // 删除处理函数
    async doDelete (id) {
      try {
        console.log(id.toString())
        const res = this.$http({
          method: 'DELETE',
          url: '/mp/v1_0/articles/' + id.toString()
        })
        console.log(res)
        this.$message.success('删除成功') // 删除成功提示
        this.loadData() // 删除成功后重新加载数据
      } catch (err) {
        console.log(err)
        this.$message.error('删除失败') // 删除失败后的提示
      }
    },
    // 点击删除处理函数
    handleDelete (index, row) {
      console.log(index, row)
      this.$confirm('确定删除?').then(() => {
        // 如果确定删除
        this.doDelete(row.id)
      }).catch(() => {
      })
    }
  }
}
</script>
